<template>
    <div class="demo-image__lazy">
        <el-image v-for="(url, index) in imgArr" :key="index" :src="url" lazy />
    </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { findcopybook } from '@/api/copybook.js'
export default {
  name: 'LiuBingShen',
  setup () {
    const imgArr = ref([])
    function getImg () {
      findcopybook().then(res => {
        if (res.code === '200') {
          imgArr.value = res.data[0].data.filter((item) => {
            return item !== null
          })
        //   console.log(imgArr)
        }
      })
    }
    onMounted(() => {
      getImg()
    })
    return { imgArr }
  }
}
</script>

<style lang="less" scoped>
.demo-image__lazy {
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
}
.demo-image__lazy .el-image {
  display: block;
  min-height: 200px;
  margin-bottom: 10px;
}
.demo-image__lazy .el-image:last-child {
  margin-bottom: 0;
}
</style>
